
<template>
  <div class="magic-cube-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="布局类型">
        <el-select v-model="data.layoutType" placeholder="请选择布局类型">
          <el-option label="一行两个" value="two-per-row" />
          <el-option label="一行三个" value="three-per-row" />
          <el-option label="一行四个" value="four-per-row" />
          <el-option label="二左二右" value="two-left-two-right" />
          <el-option label="一左二右" value="one-left-two-right" />
          <el-option label="一上二下" value="one-up-two-down" />
          <el-option label="一左三右" value="one-left-three-right" />
        </el-select>
      </el-form-item>

      <el-form-item label="图片间距">
        <el-slider 
          v-model="data.imagePadding" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="圆角大小">
        <el-slider 
          v-model="data.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="页面边距">
        <el-slider 
          v-model="data.pageMargin" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>魔方项管理</el-divider>

      <el-form-item label="魔方项">
        <div class="magic-cube-items">
          <div
            v-for="(item, index) in data.items"
            :key="index"
            class="magic-cube-item"
          >
            <el-input
              v-model="item.title"
              placeholder="请输入标题"
              size="small"
            />

            <ImageUpload
              v-model="item.image"
              :limit="1"
              :file-size="5"
              file-type="['jpg', 'jpeg', 'png', 'gif']"
            />

            <el-input
              v-model="item.url"
              placeholder="请输入跳转链接"
              size="small"
            />

            <el-button
              type="danger"
              icon="Delete"
              circle
              size="small"
              @click="removeItem(index)"
            />
          </div>

          <el-button
            type="primary"
            icon="Plus"
            @click="addItem"
            style="width: 100%; margin-top: 10px;"
          >
            添加魔方项
          </el-button>
        </div>
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="右边距">
        <el-slider 
          v-model="styles.marginRight" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'
import ImageUpload from '@/components/ImageUpload/index.vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])

// 方法
function addItem() {
  if (!props.data.items) {
    props.data.items = []
  }

  props.data.items.push({
    title: '',
    image: '',
    url: ''
  })

  emit('update:data', props.data)
}

function removeItem(index) {
  if (index >= 0 && index < props.data.items.length) {
    props.data.items.splice(index, 1)
    emit('update:data', props.data)
  }
}
</script>

<style lang="scss" scoped>
.magic-cube-panel {
  padding: 10px;

  .magic-cube-items {
    width: 100%;

    .magic-cube-item {
      display: flex;
      flex-direction: column;
      margin-bottom: 15px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 4px;

      .el-input {
        margin-bottom: 10px;
      }

      .el-upload {
        margin-bottom: 10px;
      }

      .el-button {
        align-self: flex-end;
      }
    }
  }
}
</style>
